<script setup>

import { ref } from 'vue'
//参数为单项数据传递
// ROOT <- Button <- Submit
//ROOT -> Button -> Submit
//step：只能在父组件进行修改，不能在子组件进行修改


const props = defineProps({
    //定义参数
    //参数名： 参数数据类型
    //step: Number,
    step: {
        type:Number,
        //参数是否必须传递
        required: true,
        //参数的默认值
        default: 5,
        //参数的校验函数
        validator: function(value) {
            console.log("传递的参数是:",value)
            //true 表示校验通过
            //false表示不通过
        //   return true
        //传递的值必须小于10
        if (value < 10){
            return true
        }
        else{
            return false
        }  
    }}
})
const count = ref(0)
const countPlus = () => {
  count.value=count.value + props.step
}
</script>
<template>
    <h1>你传递的参数是{{ step }}</h1>
<button class="button" @click="countPlus">You click me {{ count }} times.</button>

</template>

<style scoped> 
 .button {
  background-color: #4CAF50; /* Green */
  font-size: 20px;
  margin: 4px 2px;

  }
</style>